<template>
    <div>
        <input :type="type" :value="value" @input="inputValue" v-bind="$attrs">
    </div>
</template>

<script>
    export default {
        inheritAttrs: false,
        name: "c-input",
        props: {
            type: {//类型
                type: String,
                default: "text"
            },
            value: {//v-model原理就是给组件绑定value值 这个值在v-model里面绑定了
                default: ""
            }
        },
        methods: {
            inputValue(e) {
                //这里自定义双向绑定使 用$emit方法 直接调用 input方法
                //这里的input方法来自外面v-model 传入的input方法
                //v-model原理就是绑定value和@input 使用input方法改变value
                this.$emit("input", e.target.value);
                this.$parent.$emit("validate");
            }
        }
    }
</script>

<style scoped lang="scss">
    input {
        padding: 4px;
        outline: none;
        border-radius: 5px;
        transition: all .3s;
        border: 1px solid gray;

        &:focus {
            border: 1px solid #709633;
        }
    }
</style>